<template>
  <j-modal
    :title="'运算结果'"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :fullscreen="true"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <div class="table-page-search-wrapper">
        <a-row :gutter="24">
          <a-col :xl="8" :lg="7" :md="8" :sm="24">
            <j-multi-select-tag
              style="width: 100%"
              v-model="model.propName"
              placeholder="请选择属性名称"
              :options="jSelectMultipleOptions"
            >
            </j-multi-select-tag>
          </a-col>
          <a-col :xl="12" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-button @click="handleChart" type="primary" style="margin-left: 8px">{{ btnText }}</a-button>
              <!-- <a-button @click="handleQzfx" type="primary" style="margin-left: 8px">权重分析</a-button> -->
            </span>
          </a-col>
        </a-row>
      </div>
      <div v-if="!showChart">
        <a-table
          ref="table"
          size="middle"
          bordered
          rowKey="id"
          class="j-table-force-nowrap"
          :scroll="{ x: true }"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          @change="handleTableChange"
        >
        </a-table>
      </div>
      <div v-if="showChart"> 
        <line-chart-multid :title="'特征值曲线'" :dataSource="lineData" :fields="fields" :height="height" />
      </div>
    </a-spin>
    <weight-analyse-modal ref="modalForm" @ok="modalFormOk"></weight-analyse-modal>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
import LineChartMultid from '@/components/chart/LineChartMultid'
import dateFormat from '@/components/jeecg/JEasyCron/format-date'
import WeightAnalyseModal from './WeightAnalyseModal'
export default {
  name: 'ExtractModal',
  mixins: [JeecgListMixin],
  components: {
    JMultiSelectTag,
    LineChartMultid,
    WeightAnalyseModal,
  },
  data() {
    return {
      title: '',
      width: 900,
      height: 500,
      showChart: false,
      btnText: '查看图表',
      visible: false,
      disableSubmit: false,
      // url: {
      //   list: "/dataHistory/dataHistory/list"
      // },
      model: {
        propName: '',
      },
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'date',
        },
        {
          title: '电流',
          align: 'center',
          dataIndex: 'electric',
        },
        {
          title: '电压',
          align: 'center',
          dataIndex: 'volt',
        },
        {
          title: '电阻',
          align: 'center',
          dataIndex: 'resistance',
        },
        {
          title: '滤波电阻',
          align: 'center',
          dataIndex: 'filter_res',
        },
        {
          title: '平滑电阻',
          align: 'center',
          dataIndex: 'smooth_res',
        },
        {
          title: '针震值',
          align: 'center',
          dataIndex: 'vibration',
        },
        {
          title: '摆动值',
          align: 'center',
          dataIndex: 'swing',
        },
        {
          title: '斜率mv',
          align: 'center',
          dataIndex: 'slope',
        },
        {
          title: '累斜',
          align: 'center',
          dataIndex: 'accsloper',
        },
        {
          title: '下料间隔时间',
          align: 'center',
          dataIndex: 'real_nb_interval',
        },
        {
          title: '纯手动操作状态',
          align: 'center',
          dataIndex: 'pure_man_operation',
        },
        {
          title: '电压上限',
          align: 'center',
          dataIndex: 'volt_upper_limit',
        },
        {
          title: '电压下限',
          align: 'center',
          dataIndex: 'volt_lower_limit',
        },
        {
          title: '设定下料间隔',
          align: 'center',
          dataIndex: 'set_nb_interval',
        },
        {
          title: '效应距今',
          align: 'center',
          dataIndex: 'reaction_interval',
        },
        {
          title: '母綫位移狀態',
          align: 'center',
          dataIndex: 'bus_put_up',
        },
        {
          title: '当前的设定电压值',
          align: 'center',
          dataIndex: 'volt_set',
        },
        {
          title: '下料模式',
          align: 'center',
          dataIndex: 'nb_mode',
        },
        {
          title: '母线位移值',
          align: 'center',
          dataIndex: 'pole_move_value',
        },
        {
          title: '正常下料次数',
          align: 'center',
          dataIndex: 'norm_nb_times',
        },
        {
          title: '阳极位移01',
          align: 'center',
          dataIndex: 'pole_move_01',
        },
        {
          title: '阳极位移02',
          align: 'center',
          dataIndex: 'pole_move_02',
        },
      ],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      lineData: [
        { type: 'Jan', 电压: 7.0 },
        { type: 'Feb', 电压: 6.9 },
        { type: 'Mar', 电压: 9.5 },
        { type: 'Apr', 电压: 14.5 },
        { type: 'May', 电压: 18.4 },
        { type: 'Jun', 电压: 21.5 },
        { type: 'Jul', 电压: 25.2 },
        { type: 'Aug', 电压: 26.5 },
      ],
      fields: ['电压'],
      jSelectMultipleOptions: [
        {
          text: '电流',
          value: 'electric',
        },
        {
          text: '电压',
          value: 'volt',
        },
        {
          text: '电阻',
          value: 'resistance',
        },
        {
          text: '滤波电阻',
          value: 'filter_res',
        },
        {
          text: '平滑电阻',
          value: 'smooth_res',
        },
        {
          text: '针震值',
          value: 'vibration',
        },
        {
          text: '摆动值',
          value: 'swing',
        },
        {
          text: '斜率mv',
          value: 'slope',
        },
        {
          text: '累斜',
          value: 'accsloper',
        },
        {
          text: '下料间隔时间',
          value: 'real_nb_interval',
        },
        {
          text: '纯手动操作状态',
          value: 'pure_man_operation',
        },
        {
          text: '电压上限',
          value: 'volt_upper_limit',
        },
        {
          text: '电压下限',
          value: 'volt_lower_limit',
        },
        {
          text: '设定下料间隔',
          value: 'set_nb_interval',
        },
        {
          text: '效应距今',
          value: 'reaction_interval',
        },
        {
          text: '母綫位移狀態',
          value: 'bus_put_up',
        },
        {
          text: '当前的设定电压值',
          value: 'volt_set',
        },
        {
          text: '下料模式',
          value: 'nb_mode',
        },
        {
          text: '母线位移值',
          value: 'pole_move_value',
        },
        {
          text: '正常下料次数',
          value: 'norm_nb_times',
        },
        {
          text: '阳极位移01',
          value: 'pole_move_01',
        },
        {
          text: '阳极位移02',
          value: 'pole_move_02',
        },
      ],
    }
  },
  methods: {
    show(data) {
      this.showChart = false
      this.visible = true
      this.confirmLoading = false
      this.btnText = '查看图表'
      this.dataSource = data
      this.model.propName = '';
      this.lineData = [];
    },
    edit(record) {
      this.visible = true
      this.confirmLoading = false
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      this.$emit('close')
      this.visible = false
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    handleChart() {
      var that = this
      if (that.showChart) {
        this.btnText = '查看图表'
        that.showChart = false
        return
      } else {
        if(!that.model.propName){
          that.$message.warning('请选择属性名称')
          return;
        }
        this.btnText = '查看数据'
      }
      that.model.propName
      that.lineData = []
      that.fields = []
      var fKeys = that.model.propName.split(',') //['电流','电压','电阻','滤波电阻','平滑电阻']
      var list = []

      const format = 'yyyy-MM-dd hh:mm:ss'
      that.dataSource.forEach((e) => {
        var date = dateFormat(e.date, format)
        //date=e.recorddate
        //that.lineData.push({ type: date , '电流': e.electric,'电压': e.volt,'电阻':e.resistance,'滤波电阻':e.filter_res ,'平滑电阻':e.smooth_res})
        var obj = { type: date }
        for (let i = 0; i < fKeys.length; i++) {
          const element = that.getText(fKeys[i])
          if(element){
            obj[element] = e[fKeys[i]]
            that.fields.push(element)
          } 
        }
        that.lineData.push(obj)
      })

      that.showChart = true

      return
      httpAction('/dataHistory/dataHistory/list?pageNo=1&pageSize=50', {}, 'get')
        .then((res) => {
          if (res.success) {
            var list = []
            var data = res.result.records
            const format = 'hh:mm:ss'
            data.forEach((e) => {
              var date = dateFormat(e.recorddate, format)
              //date=e.recorddate
              that.lineData.push({
                type: date,
                电流: e.electric,
                电压: e.volt,
                电阻: e.resistance,
                滤波电阻: e.filterRes,
                平滑电阻: e.smoothRes,
              })
            })
            that.showChart = true
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {})
    },
    getText(key) { 
      let filterList = this.jSelectMultipleOptions.filter((item) => item.value == key)
       if (filterList.length > 0) {
        return filterList[0].text;
       }
      return '';
    },
    handleQzfx() {
      //权重分析
      this.$refs.modalForm.show()
    },
  },
}
</script>